<script type="text/javascript">
	Yutil.en.enhance();
</script>

<ul>
	<li>
		Delayed hover popup, &lt;a class="pop"&gt; + &lt;div class="popup"&gt;
	</li>
	<li>
		Tooltip like popup, &lt;acronym&gt; + &lt;span class="popup"&gt;
	</li>
	<li>
		See source code of this page for more details
	</li>
</ul>

<hr/>

<p>
	<a class="pop" rel="a_popup" style="text-decoration:none" href="javascript:;">
		Try hover a while &darr;
	</a>
</p>
<div id="a_popup" class="popup">
	Great day!
</div>

<hr/>

<p>
	Try
	<acronym>hover to trigger
		<span class="popup hover_popup" style="width:5em">
			hello world
		</span>
	</acronym>
</p>

<p>
	Try
	<acronym>click to trigger<br/>
		<span class="popup click_popup" style="width:15em; margin-left:1.6em;">
			Style 'width' and 'margin-left' can help the layout a little.
		</span>
	</acronym>
</p>

<hr/>

<%@ page contentType="text/html;charset=UTF-8" buffer="none" %>